<template>
  <div>
    <div class="news-img">
      <a :href="news.url">
        <img :src="news.thumbnail_pic_s" />
      </a>
    </div>
    <div class="type-news">
      <ul>
        <li
          v-for="item in typeList"
          :key="item.id"
          :class="{ typeinit: isAlive == item.id }"
          @click="change(item.id)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <NewsList :data="newsList"></NewsList>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import NewsList from "../components/NewsList";
import axios from "axios";

const typeList = [
  { id: "guonei", name: "国内" },
  { id: "guoji", name: "国际" },
  { id: "yule", name: "娱乐" },
  { id: "tiyu", name: "体育" },
  { id: "junshi", name: "军事" },
  { id: "keji", name: "科技" },
  { id: "caijing", name: "财经" },
  { id: "youxi", name: "游戏" },
  { id: "qiche", name: "汽车" },
  { id: "jiankang", name: "健康" },
];

const isAlive = ref("guonei");

const newsList = ref([]);

const news = ref({});

const getNews = (type) => {
  axios
    .get("/juheNews", {
      params: {
        type: type,
        key: "dfdf150a605d1a7b5cbe6e03fb52771e",
      },
    })
    .then((response) => {
      newsList.value = response.data.result.data;
      news.value = newsList.value[Math.floor(Math.random() * newsList.value.length)];
    })
    .catch((error) => {
      console.log(error);
    });
}

getNews("guonei");

const change = (id) => {
  isAlive.value = id;
  getNews(id);
}
</script>

<style scoped>
.news-img img {
  width: 100%;
  height: 200px;
  display: block;
}
.type-news {
  width: 100%;
  margin-top: 8px;
}
.type-news ul {
  width: 100%;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.type-news ul li {
  box-sizing: border-box;
  width: 48px;
  height: 22px;
  border: solid 1px #e03d3e;
  border-radius: 11px;
  margin: 5px 10px;

  font-size: 14px;
  color: #e03d3e;

  display: flex;
  justify-content: center;
  align-items: center;
}

.typeinit {
  background-color: #e03d3e;
  color: #fff !important; /*!important：将优先级提升最高*/
}
</style>